<template>
    <div class="publish">
        <div class="publish-top">
            <div class="publish-top-fi">
                <p>发布</p>
            </div>
        </div>
        <!-- 标题 -->
        <!-- <van-cell-group> -->
        <van-form @submit="onSubmit">
            <van-field v-model="title" name="title" label="标题" placeholder="请输入标题内容" />
            <!-- 分类 -->
            <van-field v-model="cate_name" label="分类" placeholder="请选择分类" readoniy name="cate_name" 
                @click="catePickShow = true" />
            <!-- 内容 -->
            <!-- </van-cell-group> -->
             <van-field v-model="content" name="content" label="内容" type="textarea" placeholder="请输入内容" />
            <!-- 上传图片 -->
            <van-field  label="图片"  name="fileList" >
                <template #input>
                    <van-uploader v-model="fileList" name="fileList" multiple :max-count="3" :max-size="500*1024"/>
                </template>
            </van-field >
            <div style="margin: 16px;">
                <van-button square color="#07c160" block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
            <!-- 弹出框 -->
            <van-popup v-model="catePickShow" position="bottom" :style="{ height: '50%' }">
                <van-picker title="标题" show-toolbar :columns="cate" @confirm="onConfirm" @cancel="catePickShow = false"
                    value-key="name" />
            </van-popup>
        
        <!-- 底部栏 -->
        <tabBar></tabBar>
    </div>
</template>
<style lang="less">
body {
    background: #f5f7f9;
}

.publish .publish-top {
    height: 50px;
    background-color: @green;
}

.publish .publish-top .publish-top-fi p {
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
    margin: 0px;
    font-style: normal;
}

.publish .van-cell.van-field {
    margin-bottom: 10px;
    margin-top: 10px;
}

.publish .publish-sure {
    width: 270px;
    height: 50px;
    background: @green;
    margin: 0 auto;
}

.publish .publish-sure p {
    color: #fff;
    text-align: center;
    line-height: 50px;
}
</style>
<script>
import { Field, Uploader, Picker, Popup } from 'vant';
import Tabbar from '@/components/tabBar';
import { addArticle } from '@/api/api';
import { mapState,mapActions } from 'vuex';
// import { resolve } from 'path';
// import { rejects } from 'assert';
export default {
    name: "publish",
    components: {
        [Field.name]: Field,
        [Uploader.name]: Uploader,
        [Tabbar.name]: Tabbar,
        [Picker.name]: Picker,
        [Popup.name]: Popup
    },
    data() {
        return {
            title: '',
            content: '',
            cate_id: '',
            cate_name: '',
            //imageSrc: [],
            catePickShow: false,
             fileList: [],//上传tupin
        };
    },
    computed: {
        ...mapState(['cate','uid','userInfo']),
        // addArticle(){ }
    },
    created() {
        this.$store.dispatch('getCate');
    },
    methods: {
        ...mapActions(['upload']),
        //按钮提叫确认
    async onSubmit(values) {
            // console.log('submit', values);
            let {cate_id,uid,userInfo,fileList} = this;
                // console.log(cate_id)
                // console.log(uid)
                // console.log(userInfo)
                let{nickname} = userInfo;

            //需要吧file传给服务器  服务器收到吧图片放到服务器  服务器返回一个图片路径
            if(!uid){
                this.$toast('请先登录')
                setTimeout(v=>{
                    this.$router.push('/login')
                },500)
                return
            }
            // 把fileList 这个参数 传给upload()函数
                let imageSrc = await this.upload(fileList)
                console.log(imageSrc);
                delete values.fileList;
                addArticle({
                    ...values,
                    cate_id,
                    author:nickname,
                    author_id:uid,
                    imageSrc
                }).then(res=>{
                    console.log(res)
                    if(res.code == 0){
                        this.$toast(res.msg)
                        //提示你 是否去查看
                    }else{
                        this.$toast(res.msg)
                    }
                })
        },
        //picker确认
        onConfirm(e) {
            console.log(e)
            this.catePickShow = false
            this.cate_name = e.name
            this.cate_id = e._id

        },
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
        },
        
    },
};
</script>